﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Report.cshtml";
}

<script>
    var mainChart;
    var startTime;
    var endTime;
    var typeTime;
   
    var lineType;
    $(function () {
        initControl();
        mainChart = echarts.init(document.getElementById('mainChart'));
        GetChart();
    });


    function initControl() {
        $('#reservation').daterangepicker({
            language: 'zh-CN',
            showISOWeekNumbers: true,
            endDate: moment(),
            maxDate: moment(), //最大时间
            showDropdowns: true,
            showWeekNumbers: false, //是否显示第几周
            ranges: {
                //'最近1小时': [moment().subtract('hours',1), moment()],
                '今日': [moment().startOf('day'), moment()],
                '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                '本月': [moment().startOf('month'), moment()],
                '上月': [moment().subtract('months', 1).date(1), moment().subtract('months', 1).endOf('month')],
                '本年': [moment().startOf('year'), moment()],
                '去年': [moment().subtract('years', 1).startOf('year'), moment().subtract('years', 1).endOf('year')],
            },
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '起始时间',
                toLabel: '结束时间',
                customRangeLabel: '自定义日期范围',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'
                ],
                firstDay: 1
            },
            linkedCalendars: false,
            autoUpdateInput: false,
            //"startDate": "06/29/2017",
            //"endDate": "07/05/2017"
        }, function (start, end, label) {
            if (label == '自定义日期范围') {
                $('#reservation').val(start.format('YYYY-MM-DD') + ' 到 ' + end.format('YYYY-MM-DD'));
                startTime = start.format('YYYY-MM-DD');
                endTime = end.format('YYYY-MM-DD');
                typeTime = "";
            }
            else {
                $('#reservation').val(label);
                typeTime = label;
            }
            GetChart();
        });

        $('#reservation').val('今日');
        typeTime = "今日";

        $("#devices").bindSelect({
            search: true,
            selected: 0,
            minimumInputLength: 1,
            separator: ",", // 分隔符
            url: "/DeviceManage/Meter/GetGridJsonByOrgId",
            param: { orgId: '@Dealin.Code.OperatorProvider.Provider.GetCurrent().CompanyId',typeId:'150' },
            change: function (e) {
                if (e)
                {  
                    GetChart();
                } 
            }
        });
     

        $("#lineType").select2({
            minimumResultsForSearch: -1
        });
        $("#lineType").on("change", function (e) { lineType = $("#lineType").val(); GetChart();});
        lineType = $("#lineType").val()
    };
    function GetChart() {
        var devs = $("#devices").val();
        if (!devs) {
            $.modalMsg('请选择站点设备!', "warning");
            return false;
        }
        devs = JSON.stringify(devs); 
        $.ajax({
            url: "/Comparisons/Get_Comparisons_Meter_1",
            dataType: "json",
            data: { typeTime,  startTime,  endTime,  devs, lineType },
            async: true,
            success: function (input) {
                if (input) {
                    var optionline = {
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            type: 'cross',
                            // formatter: "{a} <br/>{b}: {c} kW"
                        },
                        legend: {
                            data: input.legend// ['站点1']
                        },
                        grid: {
                            top: 70,
                            bottom: 50
                        },
                        xAxis: [{
                            name: '时间',
                            type: 'category',
                            data: input.xAxis
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: input.series
                    };

                    mainChart.setOption(optionline,true);
                }
            }
        });
    };

</script>
<form id="form1">


    <div>
        <table>
            <tr>

                <td style="padding-left: 10px;width:300px;">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" id="reservation" class="form-control input" />
                    </div>

                </td>

                <td style="padding-left:10px;width:300px;">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-line-chart"></i>
                        </div>
                        <select id="lineType" style="height:50px;" class="select2 form-control pull-right input">
                            <option selected='selected' value="kWh1">正向电能</option>
                            <option value="kWh2">反向电能</option>
                            <option value="W">功率</option>
                            <option value="V">电压</option>
                            <option value="A">电流</option>
                            <option value="Var">乏</option>
                            <option value="VA">伏安</option>
                            <option value="PT">功率因数</option>
                            <option value="Hz">频率</option>
                        </select>
                    </div>
                </td>
                <td style="padding-left:10px;width:1000px;">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-search"></i>
                        </div>
                        <select id="devices" style="height:50px;" class="select2 form-control pull-right input" multiple></select>
                    </div>
                </td>
            </tr>
        </table>
    </div>


    <div id="mainChart" style="height: 700px;width: 100%; padding-right: 10px;">
    </div>


</form>